<template>
  <div>
    <Card>
      <my-table ref="tables"
                searchable
                search-place="top"
                v-model="tableData"
                :columns="columns"
                @on-row-edit="handleRowEdit"
                @on-row-remove="handleRowRemove"
                @on-selection-change="handleSelect"
                @searchEvent="handleSearch" />
      <Row type="flex"
           justify="space-between"
           align="middle">
        <Col class="ctrls">
        <Button @click="handleDeleteBatch()">批量删除</Button>
        <Button @click="handleSetBatch()">批量设置</Button>
        <Button style="margin: 10px 0;"
                type="primary"
                @click="exportExcel">
          <Icon type="md-download"></Icon>导出表格
        </Button>
        </Col>
        <Page :total="total"
              :current="page"
              :page-size="limit"
              :page-size-opts="pageArr"
              show-elevator
              show-sizer
              show-total
              @on-change="onPageChange"
              @on-page-size-change="onPageSizeChange" />
      </Row>
    </Card>
    <EditModel :isShow="showEdit"
               :item="currentItem"
               @editEvent="handleItemEdit"
               @changeEvent="handleChangeEvent"></EditModel>
    <BatchSet :isShow="showSet"
              @editEvent="handleItemSet"
              @changeEvent="handleSetChangeEvent"></BatchSet>
  </div>
</template>

<script>
import MyTable from '_c/tables'
import EditModel from './index/edit'
import BatchSet from './index/batchSet'
import columns from './columns'
export default {
  name: 'content_management',
  components: {
    MyTable,
    EditModel,
    BatchSet
  },
  data () {
    return {
      page: 1,
      limit: 10,
      total: 0,
      option: {},
      showEdit: false,
      showSet: false,
      currentIndex: 0,
      currentItem: {},
      selection: [],
      columns,
      pageArr: [10, 20, 30, 50, 100],
      tableData: []
    }
  },
  methods: {
    handleDeleteBatch () {
      // 批量进行删除
      if (this.selection.length === 0) {
        this.$Message.info('请选择需要删除的数据！')
        return
      }
      const msg = this.selection.map((o) => o.title).join(',')
      this.$Modal.confirm({
        title: '确定删除吗？',
        content: `删除${msg}的文章吗？`,
        onOk: () => {
          const arr = this.selection.map((o) => o._id)
          Service.deletePostById(arr).then((res) => {
            // this.tableData.splice(index, 1)
            this.tableData = this.tableData.filter(
              (item) => !arr.includes(item._id)
            )
            this.$Message.success('删除成功！')
            //  this._getList()
          })
        },
        onCancel: () => {
          this.$Message.info('取消操作！')
        }
      })
    },
    handleSetBatch () {
      // 批量进行删除
      if (this.selection.length === 0) {
        this.$Message.info('请选择需要删除的数据！')
        return
      }
      // 批量进行设置 -> vip, 禁言, 角色
      this.showSet = true
    },
    handleSelect (selection) {
      this.selection = selection
    },
    handleChangeEvent (value) {
      this.showEdit = value
    },
    handleSetChangeEvent (value) {
      this.showSet = value
    },
    handleItemEdit (item) {
      Service.updatePostById(item).then((res) => {
        if (res.code === 200) {
          console.log('更新成功')
          // this.tableData[this.currentIndex] = item
          this.tableData.splice(this.currentIndex, 1, item)
        }
      })
      this.showEdit = false
    },
    // 批量设置模态框
    handleItemSet (settings) {
      const msg = this.selection.map((o) => o.title).join(',')
      this.$Modal.confirm({
        title: '确定修改吗？',
        content: `修改${msg}的文章吗`,
        onOk: () => {
          const arr = this.selection.map((o) => o._id)
          Service.updatePostBatchById({ ids: arr, settings }).then((res) => {
            // this.tableData.splice(index, 1)
            this.tableData.map((item) => {
              if (arr.includes(item._id)) {
                for (var keys of Object.keys(settings)) {
                  item[keys] = settings[keys]
                }
              }
            })
            this.$Message.success('批量设置成功！')
            //  this._getList()
          })
        },
        onCancel: () => {
          this.$Message.info('取消操作！')
        }
      })
    },
    handleRowEdit (row, index) {
      this.showEdit = true
      this.currentIndex = index
      this.currentItem = { ...row }
    },
    handleRowRemove (row, index) {
      this.$Modal.confirm({
        title: '确定删除文章吗？',
        content: `删除第${index + 1}条数据，文章标题："${row.title}"的文章吗`,
        onOk: () => {
          Service.deletePostById(row._id)
            .then((res) => {
              if (res.code === 200) {
                this.$Message.info('成功删除！')
                this.tableData = this.tableData.filter(
                  (item) => item._id !== row._id
                )
              }
            })
            .catch((err) => {
              this.$Message.info('删除失败！原因：' + err)
            })
        },
        onCancel: () => {
          this.$Message.info('取消操作！')
        }
      })
    },
    handleSearch (value) {
      // 判断是否有新的查询内容的传递，把分页数据归0
      this.option = {}
      this.page = 1
      // if (
      //   (typeof this.option.search !== 'undefined' &&
      //     value.search !== this.option.search) ||
      //   this.option === {}
      // ) {
      //   this.page = 1 // 从1开始
      // }
      if (value.item === 'tags') {
        value.item = 'tag'
      }
      this.option[value.item] = value.search
      this._getList()
    },
    exportExcel () {
      this.$refs.tables.exportCsv({
        filename: `table-${new Date().valueOf()}.csv`
      })
    },
    onPageChange (page) {
      this.page = page
      this._getList()
    },
    onPageSizeChange (size) {
      this.limit = size
      this._getList()
    },
    _getList () {
      Service.getContents({
        page: this.page - 1,
        limit: this.limit,
        ...this.option
      }).then((res) => {
        this.tableData = res.list
        this.total = res.total
      })
    }
  },
  mounted () {
    this._getList()
  }
}
</script>

<style lang="less" scoped>
.ctrls {
  button {
    margin-right: 10px;
  }
}
</style>
